<template>
	<view class="info-val flex-center alic cup">
		<view v-if="avatar" class="avatar-view flex-center alic" style="background:none;" @click="uploadImg">
			<image :src="avatar" mode="aspectFill" class="avatar-img"/>
		</view>
		<view v-else class="avatar-view flex-center alic fz10 "  @click="uploadImg">
			<text class="avatar-text" style="transform: scale(.8);">上传<br />头像</text>
		</view>
		
		<image src="@/static/images/setting/arrow-right.png" mode="widthFix" class="arrow-right-img" @click="uploadImg"/>
		<view class="upload-comp-btn flex-start-nowrap" @click="uploadImg">
			<image src="@/static/images/projectDetail/upload-icon.png" class="upload-icon-img"></image>
			<view class="upload-comp-text">
				上传头像
			</view>
		</view>
		<view class="upload-comp-tips">
			大小不超过2M
		</view>
		<ToastComp v-if="toastInfo.visible" :toastInfo="toastInfo" @closeToast="closeToast" @canel="cancelFun" @cancel="confirmFun"></ToastComp>
	</view>
	
</template>

<script>
	import ToastComp from "@/components/ToastComp/ToastComp.vue"
	export default {
		name:"m-uploadAvatar",
		props:{
			url:{
				type:String,
				default:''
			},
			test:'',
			
		},
		watch:{
			url:{
				deep:true,
				handler(val){
					this.avatar = val
				},
				
			}
		},
		mounted() {
			this.avatar = this.url
		},
		data() {
			return {
				avatar:'',
				toastInfo: {
					visible: false,
					type: 'success',
					title: '',
					subTitle: '',
					cancel: false,
					confirm: false,
					closeShow: false
				},
			};
		},
		methods:{
			// 上传头像
			uploadImg(){
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => {
						console.log(res)
						const tempFilePaths = res.tempFilePaths;
						let file = res.tempFiles[0]
						const type = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();
						// 上传类型限制
						const fileType = [".png", ".jpeg", ".jpg", ".gif"];
						if (!fileType.includes(type)) {
							let typeTxt = fileType.join(",");
							uni.showToast({
								title: `温馨提示：只支持${typeTxt}格式的文件`,
								icon: 'none',
								duration: 1500
							})
							return;
						}
						// const isLt2M = file.size / 1024 / 1024 <= 5;
						// if (!isLt2M) {
						// 	uni.showToast({
						// 		title: `文件最大不能超过5MB`,
						// 		icon: 'none',
						// 		duration: 1500
						// 	})
						// 	return;
						// }
						this.updateAvatarFun(tempFilePaths)
					}
				})
			},
			// 上传头像函数
			updateAvatarFun(tempFilePaths){
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				let Authorization = 'Bearer ' + uni.getStorageSync('Authorization')
				const header = {
					Authorization: Authorization,
					'Accept-Version': '1.0.0'
				}
				uni.uploadFile({
					url: '/api/app/user/update_avatar',
					filePath: tempFilePaths[0],
					name: 'file',
					header,
					success: (uploadFileRes) => {
						// 如果图片名称为image.jpg会有显示的问题，可能image会默认关键字
						console.log(uploadFileRes)
						uni.hideLoading()
						try{
							if(JSON.parse(uploadFileRes.data).code == 200){
								
								this.toastInfo.title = '头像上传成功'
								this.toastInfo.subTitle = ''
								this.toastInfo.type = 'success'
								this.toastInfo.closeShow = false
								this.toastInfo.visible = true
								
								setTimeout(() => {
									this.toastInfo.visible = false
								}, 1500)
								
								this.$emit('cb')
							} else {
								this.toastInfo.title = JSON.parse(uploadFileRes.data).message
								this.toastInfo.subTitle = ''
								this.toastInfo.type = 'error'
								this.toastInfo.closeShow = false
								this.toastInfo.visible = true
								setTimeout(() => {
									this.toastInfo.visible = false
								}, 1500)
							}
						}catch(e){
							//TODO handle the exception
						}
						
					}
				});
			},
			
		},
	}
</script>

<style lang="scss">
		.info-val{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #646A74;
				.avatar-view {
					width: 64px;
					height: 64px;
					border: 1px solid #f3f3f3;
					border-radius: 50%;
					overflow: hidden;
					background: #ccc;
					margin-right: 25px;
					.avatar-text{
						font-size: 10rpx;
						color: #e8e8e8;
					}
				}
				.arrow-right-img{
					display: none;
				}
				
				.avatar-img {
					height: 70px;
					width: 70px;
					// border-radius: 50%;
				}
				.upload-comp-btn{
					border: 1px solid #E7EAEF;
					padding:10px 20px;
					margin-right: 15px;
				}
				.upload-icon-img {
					width: 16px;
					height: 16px;
					display: inline-block;
					margin-right: 4px;
				}
				
			}
		@media screen and (min-width: 0px) and (max-width:1024px){
			.info-val{
				justify-content: flex-end!important;
				.avatar-view {
					margin-right: 0;
					width: 80rpx;
					height: 80rpx;
				}
			}
			.arrow-right-img,.upload-comp-btn,.upload-comp-tips{
				display: none;
			}
		}
</style>